<template>
  <div>
    <div v-if="detailarr">
      <!-- vw是视口的宽 -->
      <van-image width="100vw" height="auto" lazy-load :src="detailarr.img" />
      <h3>商品标题:{{ detailarr.tit }}</h3>
      <h3>价格:{{ detailarr.price }}</h3>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          @click="onClickIcon"
          :badge="shoparr.length" 
        />
        <van-goods-action-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-goods-action-button
          type="danger"
          text="加入购物车"
          @click="onClickButton"
        />
      </van-goods-action>
    </div>
    <div v-else>数据丢失，请返回主页</div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Vue from "vue";
import { Lazyload,Toast } from "vant";

Vue.use(Lazyload);
export default {
  created() {
    this.filterDetail(this.$route.params.id);
  },
  computed: {
    ...mapState(["detailarr","shoparr"]),
  },
  methods: {
    ...mapMutations(["filterDetail","addshop"]),
     onClickIcon() {
        this.$router.push("/home/shopcar")
    },
    onClickButton() {  // 加入购物车的函数 ，要考虑去重，加入过的不能在加入了
      // 1.调用vuex的方法
      console.log(this.detailarr,"zujian");
       this.addshop(this.detailarr)
    },
  },
};
</script>

<style>
</style>